<template>
    <a-modal width="900px" title="全局监听" :visible="visible" @cancel="handleCancel" @ok="handleOk">
        <a-form :inline="false" layout="inline" :model="formData" size="small" labelAlign="left">
            <a-form-item label="事件类型">
                <a-select v-model="formData.event" placeholder="请选择" style="width:180px">
                    <a-select-option v-for="item in eventType" :key="item.value">
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="监听类型">
                <a-select v-model="formData.type" placeholder="请选择" style="width:180px">
                    <a-select-option v-for="item in listeningType" :key="item.value">
                        {{ item.label }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="类名">
                <a-input v-model="formData.className" placeholder="请输入"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button @click="addFormData" type="primary">添加</a-button>
            </a-form-item>
        </a-form>
        <a-table :columns="columns" :rowKey="(record, index) => { return index }" :dataSource="formDataList">
            <span slot="param" slot-scope="text,scope,index" class="remove">
                <a-badge :count="scope.params.length" :number-style="{ backgroundColor: '#108ee9' }">
                    <a-button @click="showModalParam(index)">编辑</a-button>
                </a-badge>
            </span>
            <span slot="operate" slot-scope="text,scope,index" @click="remove(scope, index)" class="remove">
                删除
            </span>
        </a-table>
        <paramConfigVue ref="param" @setData="setDataParam" :list="param" />
    </a-modal>
</template>

<script>
import paramConfigVue from './paramConfig.vue';
export default {
    props: {
        taskListener: {
            type: Array
        }
    },
    components: {
        paramConfigVue
    },
    data() {
        return {
            visible: false,
            param: [],
            formData: {},
            formDataList: [],
            listeningType: [
                { label: '类', value: 'class' },
                { label: '表达式', value: 'expression' },
                { label: '委托表达式', value: 'delegateExpression' }
            ],
            eventType: [
                { label: "start", value: 'start' },
                { label: "take", value: 'take' },
                { label: "end", value: 'end' }
            ],
            columns: [
                { title: "事件", dataIndex: "event", align: "center" },
                { title: "类型", dataIndex: "type", align: "center" },
                { title: "java类名", dataIndex: "className", align: "center" },
                { title: "参数", scopedSlots: { customRender: 'param' }, align: "center" },
                { title: "操作", scopedSlots: { customRender: 'operate' }, align: "center" }
            ],
            selectIndex: -1
        }
    },
    methods: {
        showModal() {
            this.formDataList = JSON.parse(JSON.stringify(this.taskListener));
            this.visible = true;
        },
        handleOk(e) {
            this.$emit("setData", this.formDataList)
            this.handleCancel();
        },
        handleCancel(e) {
            this.visible = false;
        },
        setDataParam(val) {
            var formDataList = JSON.parse(JSON.stringify(this.formDataList))
            formDataList[this.selectIndex].params = val
            this.formDataList = formDataList;
        },
        showModalParam(val) {
            this.param = this.formDataList[val]['params']
            this.selectIndex = val
            this.$refs.param.showModal()
        },
        addFormData() {
            this.formData["params"] = []
            this.formDataList.push(this.formData)
            this.formData = {}
        },
        remove(scope, index) {
            this.formDataList.splice(index, 1)
        },
    }
}
</script>

<style scoped>
.remove {
    cursor: pointer;
}

.ant-table-wrapper {
    margin-top: 20px;
    padding: 0 20px;
}
</style>